<script lang="ts" setup>
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
/* 表单验证 */
interface RuleForm {
  email: string;
  emailCode: string;
  phoneNo: string;
  smsCode: string;
  password: string;
}
const rules = reactive<FormRules<RuleForm>>({
  email: [
    { required: true, message: "请输入登录邮箱", trigger: "blur" },
    { validator: rule.email, trigger: "blur" },
  ],
  emailCode: [{ required: true, message: "请输入邮箱验证码", trigger: "blur" }],
  password: [
    { required: true, message: "请输入登录密码", trigger: "blur" },
    { validator: rule.validatePass, trigger: "blur" },
  ],
  phoneNo: [{ required: true, message: "请输入管理员手机号", trigger: "blur" }],
  smsCode: [{ required: true, message: "请输入手机号验证码", trigger: "blur" }],
});

const ruleForm = reactive<RuleForm>({
  email: "",
  emailCode: "",
  phoneNo: "",
  smsCode: "",
  password: "",
});
const ruleFormRef = ref<FormInstance>();
const btnLoading = ref(false);
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      btnLoading.value = true;
      useApi()
        .user.register(ruleForm)
        .then((res: any) => {
          btnLoading.value = false;
          console.log(res);
          ElMessage({
            message: res.msg || "注册成功, 前往登陆~",
            type: "success",
            onClose: () => {
              navigateTo("/");
            },
          });
        })
        .catch(() => {
          btnLoading.value = false;
        });
    }
  });
};
</script>

<template>
  <div class="pages">
    <div class="content">
      <h1 class="title">注册账号</h1>
      <div class="register">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          style="max-width: 600px"
          :label-width="120"
          label-position="left"
          class="ruleForm"
        >
          <el-form-item label="登录邮箱" prop="email">
            <el-input
              v-model="ruleForm.email"
              clearable
              placeholder="请输入登录邮箱"
            />
            <p class="input-tip">
              提示:邮箱建议填写常用邮箱，将作为登录账号使用
            </p>
          </el-form-item>

          <el-form-item label="邮箱验证码" prop="emailCode">
            <div class="yzm-code">
              <el-input
                v-model="ruleForm.emailCode"
                placeholder="请输入邮箱验证码"
              />
            </div>
            <div class="get-code">
              <span
                v-if="!getEmailTimer('REGISTER')"
                class="code-send"
                @click="getEmailCode('REGISTER', ruleForm.email)"
                >获取验证码</span
              >
              <span v-else>{{ getEmailTimer("REGISTER") }}s</span>
            </div>
          </el-form-item>
          <el-form-item label="登录密码" prop="password">
            <el-input
              autocomplete="new-password"
              v-model="ruleForm.password"
              :minlength="6"
              type="password"
              placeholder="请输入登录密码"
            />
            <p class="input-tip">
              提示：密码需包含英文，数字，特殊字符，且密码不少于8位
            </p>
          </el-form-item>
          <el-form-item label="管理员手机号" prop="phoneNo">
            <el-input
              v-model="ruleForm.phoneNo"
              type="tel"
              placeholder="请输入管理员手机号"
            />
            <p class="input-tip">提示：该手机号可用于登录以及管理使用</p>
          </el-form-item>
          <el-form-item label="手机号验证码" prop="smsCode">
            <div class="yzm-code">
              <el-input
                v-model="ruleForm.smsCode"
                placeholder="请输入手机号验证码"
              />
            </div>
            <div class="get-code">
              <span
                v-if="!getSmsTimer('REGISTER')"
                class="code-send"
                @click="getSmsCode('REGISTER', ruleForm.phoneNo)"
                >获取验证码</span
              >
              <span v-else>{{ getSmsTimer("REGISTER") }}s</span>
            </div>
          </el-form-item>
          <el-button
            :loading="btnLoading"
            class="register-btn"
            @click="submitForm(ruleFormRef)"
          >
            确认注册
          </el-button>
          <div class="tips">
            <p>
              已有账号？ 
              <NuxtLink to="/">点击登录</NuxtLink>
            </p>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.pages {
  padding-top: 40px;
  padding-bottom: 106px;
  box-sizing: border-box;
  background: #fafafa;
  :deep(.el-form-item__content) {
    width: 450px;
    border-color: #c2cbdd;
    .el-input__inner {
      line-height: 40px;
      height: 40px;
      &::-webkit-input-placeholder {
        font-weight: 400;
        font-size: 14px;
        color: #c2cbdd;
      }
    }
  }
  .yzm-code {
    width: 367px;
  }

  :deep(.el-form-item__label) {
    font-weight: 400;
    font-size: 14px;
    color: #202949;
  }

  .el-form-item {
    margin-bottom: 20px;
  }

  .register-btn {
    width: 280px;
    height: 44px;
    background: #e22000;
    font-weight: 400;
    font-size: 14px;
    border-color: #e22000;
    margin: 40px auto 20px auto;
    display: block;
    color: #ffffff;
    &:hover {
      opacity: 0.8;
    }
  }

  .title {
    font-weight: 500;
    font-size: 28px;
    color: #000000;
  }

  .register {
    background: #ffffff;
    margin-top: 22px;
    display: flex;
    justify-content: center;
    padding: 40px 0px;
    box-sizing: border-box;
    z-index: 1;
    position: relative;
    min-height: 614px;
  }

  .tips {
    text-align: center;
    font-weight: 400;
    font-size: 14px;
    color: #9a9a9a;
    a {
      color: #e12010;
    }
  }
  .input-tip {
    font-weight: 400;
    font-size: 14px;
    color: #95a0b5;
  }

  .get-code {
    margin-left: 13px;
    .code-send {
      cursor: pointer;
    }
    span {
      font-weight: 400;
      font-size: 14px;
      color: #e12010;
    }
  }
}
</style>
